<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import NavMenu from './components/NavMenu.vue'
import SearchInput from './components/SearchInput.vue'
import pfp from '@/assets/Yeahz_pfp.jpg'
import icoPath from '/favicon.png'

const router = useRouter()
const searchQuery = ref('')

const goHome = () => {
  router.push('/')
}

const search = () => {
  if (searchQuery.value) {
    router.push({ name: 'Portfolio', query: { search: searchQuery.value } })
  }
}
</script>

<template>
  <div class="layout">
    <!-- 顶部导航栏 -->
    <el-header class="layout-header">
      <div class="header-left" @click="goHome">
        <h1 class="header-title">MySphere</h1>
        <el-avatar shape="square" class="header-logo" :src="icoPath" :size="45" alt="Logo" />
      </div>
      <div class="header-center">
        <NavMenu class="nav-menu" />
        <div>
          <SearchInput />
        </div>
      </div>
      <div class="header-right">
        <el-avatar class="header-user-avatar" :src="pfp" alt="User" />
        <span class="header-user-name">Yeahz</span>
      </div>
    </el-header>

    <!-- 主体部分 -->
    <el-main class="layout-main">
      <router-view />
    </el-main>
  </div>
</template>

<style scoped lang="scss">
.el-avatar {
}
.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: white;
  color: black;
}

.layout-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: #ffffff;
  border-bottom: 1px solid #ebeef5;
}

.header-left {
  display: flex;
  align-items: center; /* 垂直居中 */
  padding: 20px 20px; /* 增加一点内边距 */
  cursor: pointer;

  .header-title {
    font-size: 1.5rem; /* 大标题字体大小 */
    font-weight: bold; /* 加粗字体 */
    color: #333; /* 深色文本，易于阅读 */
    cursor: pointer; /* 鼠标悬停时显示手型 */
    transition: color 0.3s ease; /* 添加平滑的颜色过渡效果 */
  }

  .header-title:hover {
    color: #007bff; /* 鼠标悬停时改变颜色 */
  }
  .header-logo {
    cursor: pointer;
    background: none;
    margin-left: 10px;
    object-fit: contain; /* 确保图片不变形 */
  }
}

.header-center {
  flex: 1;
  padding: 0 20px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.nav-menu {
  margin-left: 20px;
}

.header-search {
  width: 100%;
}

.header-right {
  display: flex;
  align-items: center;
}

.header-user-avatar {
  margin-right: 10px;
}

.header-user-name {
  font-weight: bold;
}

.layout-main {
  flex: 1;
  width: 1000px;
  margin: 0 auto;
  padding: 20px 0;
  box-sizing: border-box;
}
</style>
